--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Commit 3bc9611135a4ced19810ffb1032ae75b2b8864d6
Parents : 3fd514f
Author : Ivan <ivan@quad4.io>
Signature : Invalid signer <e46112d44649266d71fe2193e00a4710>, author is <ivan@quad4.io>
Date : 2026-07-08T08:24:47-05:00
feat(map): update tab visibility and keyboard shortcuts to depend on viewport size
Changes
2 files changed, 21 insertions(+), 4 deletions(-)
Diff
diff --git a/meshchatx/src/frontend/components/map/MapBrowser.vue b/meshchatx/src/frontend/components/map/MapBrowser.vue
index 906d89fe..7fcc46bf 100644
--- a/meshchatx/src/frontend/components/map/MapBrowser.vue
+++ b/meshchatx/src/frontend/components/map/MapBrowser.vue
@@ -114,7 +114,7 @@ export default {
},
computed: {
showTabStrip() {
- return this.tabs.length > 0;
+ return this.isWideViewport && this.tabs.length > 0;
},
activeTab() {
return this.tabs.find((tab) => tab.id === this.activeTabId) || null;
@@ -269,7 +269,7 @@ export default {
}
},
handleKeydown(event) {
- if (this.$route?.name !== "map") {
+ if (!this.isWideViewport || this.$route?.name !== "map") {
return;
}
diff --git a/tests/frontend/MapBrowser.test.js b/tests/frontend/MapBrowser.test.js
index 66ad5621..de8da260 100644
--- a/tests/frontend/MapBrowser.test.js
+++ b/tests/frontend/MapBrowser.test.js
@@ -96,8 +96,14 @@ describe("MapBrowser.vue", () => {
expect(wrapper.vm.activeTabId).toBe(wrapper.vm.tabs[0].id);
});
- it("shows the tab strip when tabs exist", async () => {
+ it("shows the tab strip only on wide viewports", async () => {
const wrapper = await mountBrowser();
+ wrapper.vm.isWideViewport = false;
+ await wrapper.vm.$nextTick();
+ expect(wrapper.find('[role="tablist"]').exists()).toBe(false);
+
+ wrapper.vm.isWideViewport = true;
+ await wrapper.vm.$nextTick();
expect(wrapper.find('[role="tablist"]').exists()).toBe(true);
});
@@ -199,12 +205,23 @@ describe("MapBrowser.vue", () => {
expect(pages[0].props("isActiveTab")).toBe(false);
});
- it("Ctrl+T opens a new tab", async () => {
+ it("Ctrl+T opens a new tab on wide viewports", async () => {
const wrapper = await mountBrowser();
+ wrapper.vm.isWideViewport = true;
const before = wrapper.vm.tabs.length;
window.dispatchEvent(
new KeyboardEvent("keydown", { key: "t", ctrlKey: true, bubbles: true, cancelable: true })
);
expect(wrapper.vm.tabs).toHaveLength(before + 1);
});
+
+ it("ignores tab keyboard shortcuts on narrow viewports", async () => {
+ const wrapper = await mountBrowser();
+ wrapper.vm.isWideViewport = false;
+ const before = wrapper.vm.tabs.length;
+ window.dispatchEvent(
+ new KeyboardEvent("keydown", { key: "t", ctrlKey: true, bubbles: true, cancelable: true })
+ );
+ expect(wrapper.vm.tabs).toHaveLength(before);
+ });
});
──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────